<script setup lang="ts">
const props = withDefaults(defineProps<Props>(), {
  id: undefined,
  name: undefined,
  leadTeacherName: undefined,
  assistTeacherName: undefined,
  isLink: true,
})

interface Props {
  id?: string
  name?: string
  leadTeacherName?: string
  assistTeacherName?: string
  isLink?: boolean
}

const router = useRouter()
const onDetail = () => {
  router.push({ path: '/education/class/detail', query: { id: props.id } })
}
</script>

<template>
  <div class="flex-col-center-start">
    <a-tooltip :content="name">
      <a-link v-if="isLink" @click="onDetail">
        <span class="truncate">
          {{ name }}
        </span>
      </a-link>
      <span v-else class="truncate">
        {{ name }}
      </span>
    </a-tooltip>

    <a-space>
      <a-tag v-if="leadTeacherName" color="orange">
        <icon-user />
        {{ leadTeacherName }}老师
      </a-tag>
      <a-tag v-if="assistTeacherName">
        <icon-user />
        {{ assistTeacherName }}老师
      </a-tag>
    </a-space>
  </div>
</template>

<style scoped>

</style>
